@import './mixin.scss';

@font-face {
    font-family: iconfont;
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../font/iconfont.woff2') format('woff2'),
        url('../font/iconfont.woff') format('woff'),
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg#iconfont') format('svg');
}

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    color: #333;
}

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

h1,h2,h3,h4,ol,p,ul {
    margin: 0;
}

ol,ul {
    padding: 0;
    list-style: none;
}

button,input,select,textarea {
    outline: none;
    -webkit-tap-highlight-color: transparent;

    &:disabled {
        background: transparent;
    }
}

input {
    padding: 0;
    border: 0;
    -webkit-appearance: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0; 
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}

.clearfix {
    &:after {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        clear: both;
        content: '';
        visibility: hidden;
    }
}

#container {
    height: 100%;
}

.page-container {
    display: flex;
    height: 100%;
    flex-direction: column;

    .page-content {
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
        height: 93.4%; // 低版本兼容
        -webkit-overflow-scrolling: touch;

        &:first-child {
            height: 100%;
        }
    }

    &.no-top-bar {
        .page-content {
            height: 97%;
        }
    }
}
// 处理 ios webkit-overflow-scrolling: touch 导致不滚动的bug
.ios .page-content-inner {
    min-height: 100.01%;
}

.nfs-btn {
    @include btn;
}
.ellipsis {
    @include ellipsis;
}

.page-swiper>.bmw-swiper {
    display: flex;
    flex-direction: column;

    &>.pagination {
        display: flex;
        height: 2.75em;
        color: #333;
        border-bottom: 1px solid #e0e0e0; /* no */
        box-sizing: border-box;

        div {
            flex: 1;
            height: 100%;
        }

        span {
            border-bottom: 0.125em solid transparent;
            box-sizing: border-box;
            line-height: 2.75;
        }

        .active {
            color: #f60;

            span {
                display: inline-block;
                height: 100%;
                border-color: #f60;
            }
        }
    }
    &>.swiper-container {
        flex: 1;
        width: 100%;
        height: 93.4%; // 低版本兼容
        -webkit-overflow-scrolling: touch;
        &>.swiper-wrapper {
            height: 100%;
            
            &>.slide {
                height: 100%;
            }
        }
    }
}

.prize-alert, .prize-confirm {
    font-size: 0.875em;

    img {
        width: 100%;
        min-height: 3em;
        margin: 1em 0 0.5em;
    }
    .prize {
        border-radius: 0.3em;
    }
}
